<template>
  <div :class="['card-item', select ? 'card-item__select' : '']">
    <n-flex
      class="w100 h100"
      vertical
      justify="space-between"
    >
      <n-flex
        justify="space-between"
        class="w100"
      >
        <span>Credit</span>
        <span>{{ type }}</span>
      </n-flex>
      <div>
        <div style="font-size: 11px">卡号</div>
        <div style="font-size: 11px">{{ num }}</div>
      </div>
    </n-flex>
    <n-icon
      size="16"
      color="#fff"
      :component="CardOutline"
      class="card-item__logo"
    />
  </div>
</template>

<script lang="ts" setup>
  import { CardOutline } from '@vicons/ionicons5'
  withDefaults(
    defineProps<{
      select?: boolean
      // 金额
      money: string | number
      // 类型
      type: string
      // 卡号
      num?: number | string
    }>(),
    {
      money: '0',
      num: '无'
    }
  )
</script>

<style scoped lang="scss">
  .card-item {
    height: 70px;
    color: #fff;
    border: 1px solid $border-color;
    box-shadow: $shadow-lv1;
    border-radius: $radius-default;
    padding: $space-default;
    margin-bottom: $space-default;
    position: relative;
    cursor: pointer;
    background: linear-gradient(
      to top right,
      #a8b8d6 0%,
      #a8b8d6 40%,
      #a1b3d2 41%,
      #a1b3d2 50%,
      #98acce 51%,
      #98acce 60%,
      #8ea3c9 61%,
      #8ea3c9 100%
    );
    &__num {
      font-size: $fs-sm;
    }
    &__select {
      background: linear-gradient(
        to top right,
        #fa9fb1 0%,
        #fa9fb1 40%,
        #fc9ba0 41%,
        #fc9ba0 50%,
        #fd9398 51%,
        #fd9398 60%,
        #fd8a8f 61%,
        #fd8a8f 100%
      );
    }
    &__logo {
      position: absolute;
      right: $space-default;
      bottom: $space-default;
    }
  }
</style>
